<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        #header
        {
            margin-bottom: 1em;
            padding-bottom: 1em;
            border-bottom: 1px solid #eee;
        }
        .buttonListArea
        {
            float: left;
            width: 150px;
            padding-right: 10px;
            border-right: 1px solid #eee;
            margin-right: 10px;
        }
        .button
        {
            cursor:pointer;
        }

        .buttonArea
        {
            margin: 10px;
            padding-bottom: 20px;
        }
        #load_content
        {
            float: left;
            width: 550px;
            text-align: center;
        }
        #header
        {
            margin-bottom: 1em;
            padding-bottom: 1em;
            border-bottom: 1px solid #eee;
        }
        .buttonListArea
        {
            float: left;
            width: 150px;
            padding-right: 10px;
            border-right: 1px solid #eee;
            margin-right: 10px;
        }
        .button
        {
            cursor:pointer;
        }

        .buttonArea
        {
            margin: 10px;
            padding-bottom: 20px;
        }
        #load_content
        {
            float: left;
            width: 550px;
            text-align: center;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
    <div id="Container">
        <div id="header">
            <h2>加载演示</h2>
        </div>
        <div class="buttonListArea">
            <div class="buttonArea">
                <div class="button"  id="btnLoad1"> Load 1</div>
            </div>
        </div>
        <div id="load_content">
            <h2>这是要被加载的区域</h2>
        </div>
    </div>
</form>
<script>
    $(document).ready(function() {
        $('#btnLoad1.button').click(function() {
            $('#header').html("正在加载...");
            //$('#load_content').load('http://jqueryui.com/', );
            $('#load_content').hide().load('http://www.baidu.com', function(responseText, textStatus, XMLHttpRequest) {
                //所有状态成功，执行此函数，显示数据  //textStatus四种状态 success、error、notmodified、timeout
                if (textStatus == "error") {
                    var msg = "错误: ";
                    $('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
                }
                else if (textStatus == "timeout") {
                    var msg = "操时: ";
                    $('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
                }
                else {
                    $('#header').html("加载完成");
                    $(this).fadeIn();
                }
            });
        });
    });
</script>

</body>
</html>